<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo06-axios示例的使用</title>
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.css">

</head>
<body class="container-fluid" style="margin-top: 30px">
<div id="app">
    <p style="color: red;font-weight: bolder">
        特点注意：一旦你的界面中，涉及到有后台的请求，该界面在运行时，将不能再直接点右上角的 浏览器图标进行运行
            否则，请求会失败。<br/>
        要注意：每次修改了html的界面后，需要在后台将代码进行编译重新更新。<br/>
        这里有一个快捷方式：1）需要要将idea的file--->settings--->keymap快捷方式，修改为 eclipse ；2）每次修改了html界面，只需要通过快捷键：ctrl+B 即可重新编译html
    </p>
    示例1：直接访问后台中，现成的方法：<br/>
    <button @click="sendMsg" type="button" class="btn btn-outline-success">发送后台请求</button><br/>
    <p>{{result}}</p>


    示例2：访问一个我们自己创建的后台方法:<br/>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">请输入你的邮箱地址</label>
            <input v-model="myEmail" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">请输入你的登录密码</label>
            <input v-model="myPwd" type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <button class="btn btn-primary" @click="clickLogin">登录</button>
    </form>
</div>


</body>
<script>
    new Vue({
        el: "#app",
        data: {
            result:"",//这个变量，用来保存请求后台成功后，返回的数据
            myEmail:"", //用来保存邮箱信息
            myPwd:"" //用来保存密码
        },
        methods: {
            sendMsg(){
               //在点击事件里面，进行 后台请求的操作
                axios.get("/list").then(response=>{
                    //注意：请求成功后，返回回来的数据保存在repsonse变量中，但是后台返回的真正的数据，是在 response.data里面
                    this.result = response.data;
                })

            },
            clickLogin(){
                // alert("myemail="+this.myEmail+",mypwd="+this.myPwd)
                axios.get("/login?myEmail="+this.myEmail+"&myPwd="+this.myPwd).then(res=>{
                    alert(res.data);
                })
            }
        }

    })


</script>
</html>